<template>
	<view class="container">
		<view v-if="popularList.length===0" style="color: #CCCCCC;text-align: center;width: 100%;height: 500upx;line-height: 500upx;font-size: 32upx;"> 暂无数据</view>
		<view v-else>
			 
		
		<view class="un-top" id="tu3">
			<image :src="img1" mode="aspectFill"></image>
		</view>
<!-- 		<view  :class="guding3?'un-tiao3':'un-tiao1'" >
			<sl-filter :independence="true" :color="titleColor" :themeColor="themeColor" :menuList.sync="menuList" @result="result" ></sl-filter>
		</view> -->
		
		
		
		
	<!-- 	<view style="width: 100%;background-color: #0077AA; height: 100px;"> -->
			<!-- 这是一个没有什么用处的占位view，测试组件会不会被其他view挡住 -->
<!-- 		</view> -->
		<!-- <view class="text">
			<text>{{filterResult}}</text>
		</view> -->
		
		<view class="guess-section">
			<view 
				v-for="(item, index) in popularList" :key="index"
				class="guess-item"
				@click="navToDetailPage(item)"
			>
				<view class="un-renimage-wrapper">
					<image :src="img+item.THUMB" mode="aspectFill"></image>
				</view>
				<text class="un-rentitle clamp">{{item.NAME}}</text>
				<text class="un-rentit2 title2 clamp">{{item.SHORTINFO}}</text>
				<view style="-webkit-justify-content: space-between;justify-content: space-between;display: flex;">
					<text class="un-renprice">拼团价：￥{{item.GBPRICE}}</text>
					<text class="un-rentit2 title2">已售{{item.SALECOUNT}}</text>
				</view>
			</view>
		</view>
		</view>
		
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
	
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			slFilter,
			uniLoadMore	
		},
		data() {
			return {
				img:'',
				img1:'',//顶部图片
				guding3:false,
				popularList:[],
				themeColor: '#E02E24',
				titleColor: '#666666',
				filterResult: '',
				menuList: [
					
					{
						'title': '单选',
						'key': 'single',
						'isMutiple': false,
						'detailTitle': '请选择（单选）',
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '综合排序',
								'value': ''
							}
						]
					},
					{
						'title': '价格排序',
						'key': 'sort',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '价格从高到低',
								'value': ''
							},
							{
								'title': '价格从低到高',
								'value': 'add_time'
							}
						]
					},
					{
						'title': '分类查看',
						'key': 'salary',
						'isMutiple': true,
						'detailList': [{
								'title': '全部',
								'value': ''
							},
							{
								'title': '居家',
								'value': '0~2000'
							},
							{
								'title': '餐厨',
								'value': '2000~3000'
							}
						]
						
					}
				],
				pagesize: 0 ,	//每页条数
				pageNumber: 0 ,  //页码
				totalpage : 0,	//总页数
				totalrow : 0 ,		//总记录数
				loadingType: 'more', //加载更多状态
			}
		},
		// #ifndef MP
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url:"/pagesun/groupbuy/groupBuyRule/groupBuyRule"
			})
		},
		// #endif
		onLoad() {
			this.loadData();
			this.img = getApp().globalData.imageAddress
			this.img1=this.img+'/top/groupbuy.jpg'
			uni.startPullDownRefresh();
		},
		//下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.loadData('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//加载更多
		onReachBottom(){
			this.loadData();
		},
		//监控页面滚动
		onPageScroll() {
			uni.createSelectorQuery().select('#tu3').boundingClientRect().exec((ret) => {
				const rect = ret[0];
				
				if (rect.top<=-150) {
					
					this.guding3=true;
				}else{
					this.guding3=false;
				}
			});
			
		},
		methods: {  
			async loadData(type='add', loading) {
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						uni.showToast({
							title:'没有数据了',
							icon:'none'
						})
						return;
					}
					this.loadingType = 'more';
				}else{
					this.loadingType = 'more'
				}
				
				if(type === 'refresh'){
					this.loadingType = 'more'
					this.pageNumber = ''
				}
			
				//加载信息
				this.$http.post("/group/findGroupBuyGoodsPage",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
					PAGENUM: this.loadingType == 'more' ? (this.pageNumber+1) : this.pageNumber
				}).then((e)=>{
					let a = e.data.OBJECT
					if(e.data.STATE=='0'&&e.statusCode == 200){
						this.pagesize = a.PAGENUMBER 	//每页条数
						this.pageNumber = a.PAGENUMBER  //页码
						this.totalpage = a.TOTALPAGE	//总页数
						this.totalrow = a.TOTALROW		//总记录数
						let popularList=[]
						 e.data.OBJECT.LIST.map(item=>{
							if(item.ID){
								popularList.push(item)
								
							}
						})
						
						if(type === 'refresh'){
							this.popularList = [];
						}
						this.popularList = this.popularList.concat(popularList);
						console.log("刷新后",this.popularList)
					}else{
						uni.showToast({
							title:e.data.MSG,
							icon:'none'
						})
					}
				}).catch((err)=>{
					console.log("请求超时",err);
				}).then((e)=>{
					//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
					this.loadingType  = this.pageNumber == this.totalpage ? 'nomore' : 'more';
					console.log("当前还有吗？",this.loadingType)
					if(type === 'refresh'){
						if(loading == 1){
							uni.hideLoading()
						}else{
							uni.stopPullDownRefresh();
						}
					}
				})
			},
			//跳转商品详情页
			navToDetailPage(item) {
					let userid='undefined';
					if(uni.getStorageSync('userInfo')&&uni.getStorageSync('userInfo').USER&&uni.getStorageSync('userInfo').USER.ID){
						userid = uni.getStorageSync('userInfo').USER.ID
					}
					let id = item.ID;
					uni.navigateTo({
						url: `/pages/product/productGroup?ID=${id}&userId=${userid}`
					})
				
			},
			result(val) {
				console.log('filter_result:' + JSON.stringify(val));
				this.filterResult = JSON.stringify(val, null, 2)
			}
			
		},
		
	}
</script>

<style lang="scss">
	.un-top{
		width: 100%;
		height: 310upx;
		background: #fff;
		image{
			width:100%;
			height: 100%; 
		}
	}
	.un-tiao1{
		
		width: 100%;
		height: 100%; 
		z-index: 1;
	}
	.un-tiao3{
		top: 80upx;
		position: fixed;
		width: 100%;
		height: 100%; 
		z-index: 1;
	}
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 5upx 15upx 0upx;
		background: #fff;
		.guess-item{
			
			margin-top: 5upx;
			// display:flex;
			flex-direction: column;
			width: 47%;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.un-renimage-wrapper{
			// margin-left: 45upx;
			width: 350upx;
			height: 370upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.un-rentitle{
			font-size: 22upx;
			color: $font-color-dark;
			line-height: 40upx;
		}
		.un-renprice{
			font-size: 22upx;
			color: $uni-color-primary;
			line-height: 1;
			line-height: 40upx;
		}
		.un-rentit2{
			font-size: 22upx;
			color: $font-color-light;
			line-height: 40upx;
		}
	}
</style>
